<template>
    <nav-bar>
      <template v-slot:default>商品详情</template>
    </nav-bar>
    <div class="detailList">
       <h3 class="title">书名：{{list[id].title}}</h3>
       <img :src="list[id].url" alt="">
       <h4 class="price">单价：<span>￥{{list[id].price}}</span></h4>
       <el-button type="primary">加入购物车</el-button>
        <el-button type="success">下单直接购买</el-button>
    </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { useRoute } from 'vue-router'
import NavBar from '../../components/common/navbar/NavBar.vue'
export default {
    components:{
        NavBar
    },
    setup () {
        const route =useRoute();
        const state = reactive({
            id: 0,
            list: [
              {
                id: 1,
                url: require('../../assets/images/book.jpg'),
                title: '轻松学Web',
                price: 88,
                collectcount: 58

              },
              {
                id: 2,
                url: require('../../assets/images/book1.jpg'),
                title: 'CSS+Html5',
                price: 68,
                collectcount: 10
              },
              {
                id: 3,
                url: require('../../assets/images/book2.png'),
                title: 'Node.js',
                price: 45,
                collectcount: 8
              },
              {
                id: 4,
                url: require('../../assets/images/book3.jpg'),
                title: '轻松学Python',
                price: 73,
                collectcount: 24
              },
              {
                id: 5,
                url: require('../../assets/images/book4.jpg'),
                title: 'CSS+HTML5',
                price: 66,
                collectcount: 34
              }
            ]
        })
        state.id=route.query.id
       
        return {
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>

.title,.price{
    text-align: left;
    margin: 10px;
}
.price span{
    color: red;
}
.detailList{
    margin-top: 60px;
}
</style>